<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css" rel="stylesheet"
  integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="./dist/main.css" rel="stylesheet" />
<div class="resizable_flex_column px-1" id="divRoot">
  <div class="input-group input-group-sm mb-1 mt-1 has-validation">
    <label class="input-group-text" id="label">Default</label>
    <input type="text" class="form-control" spellcheck="false" disabled id="inputIdValue">
    <button class="btn btn-outline-primary btn-sm" id="buttonEdit" data-bs-toggle="tooltip" title="Edit">
      Create
    </button>
    <button class="btn btn-outline-primary btn-sm" hidden id="buttonCreate" data-bs-toggle="tooltip" title="Create">
      Create
    </button>
    <button class="btn btn-outline-primary btn-sm" hidden id="buttonUpdate" data-bs-toggle="tooltip" title="Update">
      Update
    </button>
    <button class="btn btn-outline-secondary btn-sm" hidden id="buttonDelete" data-bs-toggle="tooltip" title="Delete">
      Delete
    </button>
    <button class="btn btn-outline-secondary btn-sm" hidden id="buttonCancel" data-bs-toggle="tooltip" title="Cancel">
      Cancel
    </button>
    <button type="button" id="buttonFullscreen" hidden class="btn btn-outline-secondary btn-sm button_round_both ms-1" title="Toggle fullscreen">
        <i class="bi bi-arrows-fullscreen"></i>
    </button>
    <div class="invalid-feedback"></div>
  </div>
  <slot></slot>
</div>